<template>
    <!-- 登录页 -->
    <div class="LoginView">
        <div class="form">
            <div class="logo">
                <img src="@/assets/img/login/normal.png" alt="" />
            </div>
            <i @click="closeHandler" class="close van-icon van-icon-close"></i>
            <van-tabs v-model="active" animated>
                <!-- 登录按钮的内容 -->
                <van-tab title="登录">
                    <!-- 输入手机号，调起手机号键盘 -->
                    <template v-if="loginControl.flag == 0">
                        <van-field
                            required
                            clearable
                            v-model="login.tel"
                            type="tel"
                            label="手机号"
                            placeholder="请输入手机号"
                        />
                        <van-field
                            v-model="login.sms"
                            center
                            clearable
                            required
                            label="请输入验证码"
                            placeholder="请输入验证码"
                        >
                            <template #button>
                                <van-button
                                    size="small"
                                    :disabled="disabled"
                                    type="primary"
                                    >发送验证码</van-button
                                >
                            </template>
                        </van-field>
                    </template>
                    <template v-if="loginControl.flag == 1">
                        <van-field
                            required
                            clearable
                            v-model="login.tel"
                            type="tel"
                            label="手机号"
                            placeholder="请输入手机号"
                        />
                        <van-field
                            v-model="login.password"
                            required
                            type="password"
                            placeholder="请输入密码"
                            label="密码"
                        />
                        <!-- <van-field
                            v-model="login.yzm"
                            center
                            clearable
                            required
                            placeholder="请输入验证码"
                        >
                            <template #button>
                                <img
                                    class="verificationImage"
                                    src="http://demo.itlike.com/web/xlmc/api/captcha"
                                    alt="captcha"

                                    ref="imgCaptcha"
                                    slot="button"
                                />
                            </template>
                        </van-field> -->
                    </template>
                    <van-button
                        class="loginBtn"
                        type="info"
                        >登录</van-button
                    >
                    <!-- <p class="loginControl" >
                        {{ loginControl.text[loginControl.flag] }}
                    </p> -->
                </van-tab>
                <!-- 注册按钮的内容 -->
                <van-tab title="注册">
                    <van-field
                        required
                        clearable
                        v-model="register.tel"
                        type="tel"
                        label="手机号"
                        placeholder="请输入手机号"
                    />
                    <van-field
                        v-model="register.password"
                        required
                        type="password"
                        placeholder="请输入密码(不少于六位)"
                        label="密码"
                    />
                    <van-button
                        class="loginBtn"
                        type="info"
                        >注册</van-button
                    >
                </van-tab>
            </van-tabs>

            <!-- 第三方登录 -->
            <div class="divider">其他登录方式</div>
            <div class="otherLogin">
                <div>
                    <img src="@/assets/img/login/wx.png" alt="" />
                    <p>微信登录</p>
                </div>
                <div>
                    <img src="@/assets/img/login/qq.png" alt="" />
                    <p>QQ登录</p>
                </div>
            </div>
            <!-- 温馨提示 -->

            <p class="agreement">
                温馨提示：<br />未注册的手机号，登录时将自动注册，且代表同意<a
                    class="agreement-box"
                    >用户协议</a
                >、<a class="agreement-box">隐私策略</a>
            </p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "LoginView",
        data() {
            return {
                active: 0,
                // 登录
                login: {
                    tel: "",
                    sms: "",
                    password: "",
                    yzm: "",
                },
                // 注册
                register: {
                    tel: "",
                    password: "",
                },
                disabled: true,
                loginControl: {
                    text: ["账号密码登录", "短信验证码登录"],
                    flag: 0,
                },
            };
        },
        watch: {
            "login.tel": {
                handler() {
                    if (/^1[3-9]\d{9}$/.test(this.login.tel)) {
                        this.disabled = false;
                    } else {
                        this.disabled = true;
                    }
                },
            },
        },

        mounted() {},

        methods: {
            closeHandler() {
                this.$router.go(-1);
            },
            loginControlHandler() {
                for (let key in this.login) {
                    this.login[key] = "";
                }
                if (this.loginControl.flag == 0) {
                    this.loginControl.flag = 1;
                    return;
                }
                if (this.loginControl.flag == 1) {
                    this.loginControl.flag = 0;
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .LoginView {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: url("@/assets/img/login/back2.jpg");
        background-size: cover;
        .form {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 2rem;
            width: 26.5rem;
            max-width: 90%;
            font-size: 1.167rem;
            background-color: #fff;
            border-radius: 8px;
            box-sizing: border-box;
            .logo {
                img {
                    position: absolute;
                    top: 1rem;
                    left: 50%;
                    width: 4rem;
                    transform: translate(-50%, -70%);
                    z-index: 1;
                }
            }
            .close {
                position: absolute;
                right: 1rem;
                top: 0.4rem;
            }
            .loginBtn {
                height: 50px;
                width: 100%;
                margin-top: 2rem;
            }
            .loginControl {
                font-size: 0.78rem;
                margin-top: 1rem;
            }
            .divider {
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                margin: 16px 0;
                font-size: 14px;
                line-height: 24px;
                border-style: solid;
                border-width: 0;
                border-color: rgb(25, 137, 250);
                color: rgb(25, 137, 250);
                padding: 0px 5px;
                &::before {
                    margin-right: 16px;
                    content: "";
                    transform: scaleY(0.5);
                    display: block;
                    -webkit-box-flex: 1;
                    flex: 1;
                    box-sizing: border-box;
                    height: 1px;
                    border-color: inherit;
                    border-style: inherit;
                    border-width: 1px 0 0;
                }
                &::after {
                    margin-left: 16px;
                    content: "";
                    transform: scaleY(0.5);
                    display: block;
                    -webkit-box-flex: 1;
                    flex: 1;
                    box-sizing: border-box;
                    height: 1px;
                    border-color: inherit;
                    border-style: inherit;
                    border-width: 1px 0 0;
                }
            }
            .otherLogin {
                display: flex;
                align-items: center;
                justify-content: space-around;
                text-align: center;
                img {
                    width: 1em;
                    height: 1em;
                }
                P {
                    padding: 0.5rem;
                    font-size: 0.5rem;
                    color: grey;
                }
            }
            .agreement {
                line-height: 1rem;
                color: #767676;
                font-size: 0.6rem;
            }
        }
    }
</style>